<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonJs.js"></script>
		<script src="../../js/commonCss.js"></script>
		<title>添加新用户</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14">
				<a @click="goback">
					<el-button type="text" icon="el-icon-arrow-left">新增用户</el-button>
				</a>
			</div>
			<div class="pd10">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					  <el-form-item label="姓名:" prop="username">
						<el-input v-model="ruleForm.username" style="width:350px;"></el-input>
					  </el-form-item>
					  <el-form-item label="性别:" prop="sex">
						  <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
						  <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
					  </el-form-item>
					  <el-form-item label="身份证号:" prop="idCard">
					  		<el-input v-model="ruleForm.idCard" style="width:350px;"></el-input>
					  </el-form-item>
					  <el-form-item label="密码:" prop="password">
					  		<el-input v-model="ruleForm.password" type="password" style="width:350px;"></el-input>
					  </el-form-item>
					  <el-form-item label="确认密码:" prop="confirmPassword">
					  		<el-input v-model="ruleForm.confirmPassword" type="password" style="width:350px;"></el-input>
					  </el-form-item>
					  <el-form-item label="省行:" prop="provinceBank">
						<el-select v-model="ruleForm.provinceBank" placeholder="请选择省行" style="width:350px;" @change="getCBank">
							<el-option
							  v-for="(item,index) in provinceArr"
							  :key="index"
							  :label="item.bankName"
							  :value="item.bankId">
							</el-option>
						</el-select>
					  </el-form-item>
					  <el-form-item label="市行:" prop="cityBank">
						<el-select v-model="ruleForm.cityBank" placeholder="请选择市行" style="width:350px;">
						  <el-option
						    v-for="(item,index) in cityArr"
						    :key="index"
						    :label="item.bankName"
						    :value="item.bankId">
						  </el-option>
						</el-select>
					  </el-form-item>
					  <el-form-item label="支行:" prop="subBank">
						  <el-input v-model="ruleForm.subBank" style="width:350px;"></el-input>

					  </el-form-item>
					  <el-form-item label="网点:">
					  		<el-input v-model="ruleForm.location" style="width:350px;"></el-input>
					  </el-form-item>
					  <el-form-item label="手机号:" prop="mobile">
					  		<el-input v-model.number="ruleForm.mobile" style="width:350px;"></el-input>
					  </el-form-item>
					  <el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
					  </el-form-item>
					</el-form>
			</div>			
		</div>
	</body>

	<script src="/jeefast/static/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/static/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/static/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/static/js/axios.js"></script>
	<script src="/jeefast/static/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {					
					// 省行
					provinceArr:[],
					cityArr:[],
					ruleForm: {
						username: '',
						sex:"",
						idCard:"",
						password:"",
						confirmPassword:"",
						provinceBank:"",
						cityBank:"",
						subBank:"",
						location:"",
						mobile:"",
					},
					rules: {
					  username: [
						{ required: true, message: '请输入姓名', trigger: 'blur' },
					  ],
					  sex: [
						{ required: true, message: '请选择性别', trigger: 'change' }
					  ],
						idCard: [
					  	{ required: true, message: '请输入身份证号', trigger: 'blur' },
						{
							pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/,
							message: '证件号码格式有误！',
							trigger: 'blur'
						}
					  ],
					  password: [
					  	{ required: true, message: '请输入密码', trigger: 'blur' },
					  ],
					  confirmPassword: [
						{ required: true, message: '请输入确认密码', trigger: 'change' }
					  ],
					  provinceBank: [
						{ required: false, message: '请选择省行', trigger: 'change' }
					  ],
					  cityBank: [
						{ required: false, message: '请选择市行', trigger: 'change' }
					  ],
					   subBank: [
						{ required: false, message: '请输入支行', trigger: 'blur' }
					  ],
					  mobile: [
					  	{ type:'number',required: true, message: '请输入手机号', trigger: 'blur' }
					  ],
					}
				}
			},
			methods: {
				goback:function(){
					window.history.back();  //返回上一页
				},
				getPBank(){
					let that = this;
					provinceBankList({limit:10000}).then(res=>{
						that.provinceArr = res.data.data;
					})
				},
				getCBank(){
					this.cityArr = [];
					this.ruleForm.city = "";
					let that = this;
					cityBankList({limit:10000,provienceId:that.ruleForm.province}).then(res=>{
						that.cityArr = res.data.data;
					})
				},
				submitForm(formName) {
					let that = this
					this.$refs[formName].validate((valid) => {
					  if (valid) {
						  if(that.ruleForm.password != that.ruleForm.confirmPassword){
							  that.$message.warning('两次密码输入不一致')
							  return
						  }
						  addUser(that.ruleForm).then(res =>{
							  if(res.data.code==500){
								  alert("手机号已注册");
							  } else{
								  window.history.go(-1);
							  }
						  })
					  } else {
						console.log('error submit!!');
						return false;
					  }
					});
				  },
			},
			created() {
				this.getPBank();
			},
		});
	</script>
</html>
